<template>
  <div class="logistics-management">
    <div class="logistics-header">
      <h3>物流管理</h3>
      <el-button type="primary" @click="showAddDialog">添加物流记录</el-button>
    </div>

    <!-- 物流记录列表 -->
    <el-table :data="logisticsList" style="width: 100%" v-loading="loading">
      <el-table-column prop="batch_id" label="批次号" width="180"></el-table-column>
      <el-table-column prop="from_location" label="起始地" width="180"></el-table-column>
      <el-table-column prop="to_location" label="目的地" width="180"></el-table-column>
      <el-table-column prop="temp_record" label="运输温度">
        <template slot-scope="scope">
          {{ scope.row.temp_record }}°C
          <el-tag 
            size="mini" 
            :type="isTempNormal(scope.row.temp_record) ? 'success' : 'danger'">
            {{ isTempNormal(scope.row.temp_record) ? '正常' : '异常' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="120">
        <template slot-scope="scope">
          <el-tag :type="getStatusType(scope.row.status)">
            {{ getStatusLabel(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="created_at" label="创建时间" width="180"></el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="viewDetails(scope.row)">查看详情</el-button>
          <el-button 
            size="mini" 
            type="success" 
            v-if="scope.row.status === 'in_transit'"
            @click="completeDelivery(scope.row)">完成配送</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <!-- 添加物流记录对话框 -->
    <el-dialog title="添加物流记录" :visible.sync="dialogVisible" width="500px">
      <el-form :model="logisticsForm" :rules="rules" ref="logisticsForm" label-width="100px">
        <el-form-item label="批次号" prop="batch_id">
          <el-select v-model="logisticsForm.batch_id" placeholder="请选择批次">
            <el-option
              v-for="item in batches"
              :key="item.batch_id"
              :label="item.batch_id"
              :value="item.batch_id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="起始地" prop="from_location">
          <el-input v-model="logisticsForm.from_location"></el-input>
        </el-form-item>
        <el-form-item label="目的地" prop="to_location">
          <el-input v-model="logisticsForm.to_location"></el-input>
        </el-form-item>
        <el-form-item label="运输温度" prop="temp_record">
          <el-input-number v-model="logisticsForm.temp_record" :precision="1" :step="0.5"></el-input-number>
          <span class="unit">°C</span>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="logisticsForm.status" placeholder="请选择状态">
            <el-option label="运输中" value="in_transit"></el-option>
            <el-option label="已送达" value="delivered"></el-option>
            <el-option label="异常" value="abnormal"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitLogistics">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'LogisticsManagement',
  data() {
    return {
      loading: false,
      logisticsList: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dialogVisible: false,
      batches: [],
      logisticsForm: {
        batch_id: '',
        from_location: '',
        to_location: '',
        temp_record: 4.0,
        status: 'in_transit'
      },
      rules: {
        batch_id: [
          { required: true, message: '请选择批次', trigger: 'change' }
        ],
        from_location: [
          { required: true, message: '请输入起始地', trigger: 'blur' }
        ],
        to_location: [
          { required: true, message: '请输入目的地', trigger: 'blur' }
        ],
        temp_record: [
          { required: true, message: '请输入运输温度', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.fetchLogisticsList()
    this.fetchBatches()
  },
  methods: {
    async fetchLogisticsList() {
      this.loading = true
      try {
        // TODO: 调用后端API获取物流记录列表
        // const response = await this.$http.get('/api/logistics', {
        //   params: {
        //     page: this.currentPage,
        //     pageSize: this.pageSize
        //   }
        // })
        // this.logisticsList = response.data.items
        // this.total = response.data.total
      } catch (error) {
        this.$message.error('获取物流记录失败')
      } finally {
        this.loading = false
      }
    },
    async fetchBatches() {
      try {
        // TODO: 调用后端API获取批次列表
        // const response = await this.$http.get('/api/batches')
        // this.batches = response.data
      } catch (error) {
        this.$message.error('获取批次列表失败')
      }
    },
    showAddDialog() {
      this.dialogVisible = true
      this.logisticsForm = {
        batch_id: '',
        from_location: '',
        to_location: '',
        temp_record: 4.0,
        status: 'in_transit'
      }
    },
    async submitLogistics() {
      try {
        await this.$refs.logisticsForm.validate()
        // TODO: 调用后端API创建物流记录
        // await this.$http.post('/api/logistics', this.logisticsForm)
        this.$message.success('物流记录创建成功')
        this.dialogVisible = false
        this.fetchLogisticsList()
      } catch (error) {
        this.$message.error('物流记录创建失败')
      }
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchLogisticsList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchLogisticsList()
    },
    viewDetails(row) {
      // TODO: 实现查看详情功能
      console.log('查看详情:', row)
    },
    async completeDelivery(row) {
      try {
        // TODO: 调用后端API完成配送
        // await this.$http.put(`/api/logistics/${row.id}/complete`)
        this.$message.success('配送完成')
        this.fetchLogisticsList()
      } catch (error) {
        this.$message.error('操作失败')
      }
    },
    getStatusLabel(status) {
      const statusMap = {
        in_transit: '运输中',
        delivered: '已送达',
        abnormal: '异常'
      }
      return statusMap[status] || status
    },
    getStatusType(status) {
      const typeMap = {
        in_transit: 'primary',
        delivered: 'success',
        abnormal: 'danger'
      }
      return typeMap[status] || 'info'
    },
    isTempNormal(temp) {
      // TODO: 根据实际业务规则判断温度是否正常
      return temp >= 0 && temp <= 8
    }
  }
}
</script>
<style scoped>
.logistics-management {
  padding: 20px;
}
.logistics-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.logistics-header h3 {
  margin: 0;
}
.pagination-container {
  margin-top: 20px;
  text-align: right;
}
.unit {
  margin-left: 10px;
  color: #606266;
}
</style> 